import React, { useEffect, useState } from "react";
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  StyleSheet,
  Alert,
  TouchableWithoutFeedback,
  Keyboard,
} from 'react-native';
import theme from '../utils/theme';
import useHideTabBar from '../utils/useHideTabBar';
import {useNavigation} from '@react-navigation/native';
import API from '../Network/Api';
import Toast from 'react-native-toast-message';
import { showToast } from '../utils/toastUtils';
import { getData } from '../utils/storageUtils';
import { CustomText } from "../customview/CustomText";
import { normalize } from "../utils/commonUtils";

const RealNameAuthenticationPage = () => {
  const [realName, setRealName] = useState('');
  const [idNumber, setIdNumber] = useState('');
  const [isReal, setIsReal] = useState(false);
  const navigation = useNavigation();
  useHideTabBar(navigation);

  useEffect(() => {
    const loadUserInfo = async () => {
      try {
        const loginInfo = await getData('userInfoKey');
        if (loginInfo) {
          // 假设本地存储的数据中有 realName 和 idNumber 字段
          if (loginInfo.userName) {
            setRealName(loginInfo.userName);
          }
          if (loginInfo.sfzID) {
            setIdNumber(loginInfo.sfzID);
          }
          if (loginInfo.isRealName) {
            setIsReal(loginInfo.isRealName);
          }
        }
      } catch (error) {
        console.error('读取本地用户信息失败:', error);
      }
    };

    loadUserInfo();
  }, []);

  const handleAuthentication = () => {
    // 这里可以添加实名认证的逻辑，比如发送请求到服务器进行验证
    console.log('真实姓名:', realName);
    console.log('身份证号码:', idNumber);
    API.addUserBankCard(idNumber, realName)
      .then(response => {
        if (response.resultCode === '1') {
          Alert.alert('提示', '实名认证成功！');
        } else {
          showToast({
            text2: response.showMsg,
          });
        }
      })
      .catch(error => {
        showToast({
          text2: '实名认证失败，请联系管理员！',
        });
      });
  };

  const dismissKeyboard = () => {
    Keyboard.dismiss();
  };

  return (
    <TouchableWithoutFeedback onPress={dismissKeyboard}>
      <View style={styles.container}>
        <View style={styles.inputContainer}>
          <CustomText style={styles.label}>真实姓名</CustomText>
          <TextInput
            allowFontScaling={false}
            style={styles.input}
            placeholder="请输入真实姓名"
            value={realName}
            onChangeText={(text) => setRealName(text)}
          />
        </View>
        <View style={styles.inputContainer}>
          <CustomText style={styles.label}>身份证号码</CustomText>
          <TextInput
            allowFontScaling={false}
            style={styles.input}
            placeholder="请输入身份证号码"
            value={idNumber}
            onChangeText={(text) => setIdNumber(text)}
          />
        </View>
        <CustomText style={styles.tip}>
          请填写真实有效的身份证信息，如果信息填写错误将导致收款失败。
        </CustomText>
        <TouchableOpacity style={styles.authenticationButton} onPress={handleAuthentication}>
          <CustomText style={styles.buttonText}>
            {isReal ? '重新认证' : '立即认证'}
          </CustomText>
        </TouchableOpacity>
        <Toast />
      </View>
    </TouchableWithoutFeedback>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
    padding: 20,
  },
  inputContainer: {
    marginBottom: 20,
  },
  label: {
    fontSize: normalize(16),
    fontWeight: '500',
    marginBottom: 5,
  },
  input: {
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 10,
    fontSize: normalize(16),
  },
  tip: {
    fontSize: normalize(14),
    color: '#999',
    marginBottom: 20,
  },
  authenticationButton: {
    backgroundColor: theme.colors.primary,
    borderRadius: 8,
    alignItems: 'center',
    padding: 15
  },
  buttonText: {
    color: '#fff',
    fontSize: normalize(18),
    fontWeight: 'bold',
  },
});

export default RealNameAuthenticationPage;
